<template>
  <div class="content">
    <!-- 展示异步组件必须使用 Vue 提供的 Suspense 内置组件 -->
    <Suspense>
      <template #default>
        <SyncVue />
      </template>

      <!-- 加载时展示的内容 -->
      <template #fallback>
        <Skeleton />
      </template>
    </Suspense>
  </div>
</template>

<script setup lang="ts">
import { defineAsyncComponent } from "vue";
import Skeleton from "./skeleton.vue";

// 优化知识点：【异步引入的组件，打包时会生成不同的JS文件，使用的时候才会加载，从而减少首次加载主包 JS 文件的时间】

// 引入异步组件（方式一）
const SyncVue = defineAsyncComponent(() => import("./sync.vue"));

// 引入异步组件（方式二）
// const SyncVue = defineAsyncComponent({
//   loader: () => import("./sync.vue"),
//   loadingComponent: Skeleton,
//   delay: 300,
//   errorComponent: () => import("./error.vue"),
//   timeout: 3000,
// });
</script>

<style scoped>
.content {
  padding: 20px;
}
</style>
